<template>
  <el-drawer
    :model-value="modelValue"
    :title="title"
    :size="width"
    :before-close="handleClose"
    :custom-class="customClass"
    :direction="direction"
    :close-on-click-modal="isCloseModal"
    :close-on-press-escape="false"
  >
    <slot />
    <template
      v-if="isFooter"
      #footer
    >
      <slot name="dialogFooter">
        <button-list @handle-but-click="handleButClick" />
      </slot>
    </template>
  </el-drawer>
</template>

<script setup name="drawerModule">
defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    isCloseModal: {
        type: Boolean,
        default: false
    },
    customClass: {
        type: String,
        default: ''
    },
    title: {
        type: String,
        default: ''
    },
    width: {
        type: [String, Number],
        default: '718px'
    },
    direction: {
        type: String,
        default: 'rtl'
    },
    isFooter: {
        type: Boolean,
        default: true
    }
})
const emit = defineEmits(['update:modelValue', 'handleButClick'])
const handleClose = () => {
    emit('update:modelValue', false)
}
const handleButClick = (e) => {
    if (e.isClone) {
        handleClose()
    } else {
        emit('handleButClick', e)
    }
}
</script>

<style lang="scss" scoped></style>
